<template>
	<view>
		<view class="flex-align-center black-bg c-white p30 ">
			<u-avatar src="/static/images/logo.png"
				size="50"></u-avatar>
			<view class="ml20">
				<view class="flex-row">
					<text class="f30 bold mr20">{{showName}}</text>
					<u-icon name="setting-fill" color="#AAB1C2" size="18" @click="gotoFun('/pagesMy/views/userSetting')"></u-icon>
				</view>
				<view class="mt10">{{blurStr(phone,4,4)}}</view>
			</view>
		</view>
		<view class="p30">
			<u-swiper :list="bannerList" :radius="10" :height="150" img-mode="scaleToFill"></u-swiper>
			<view class="card-shadow-box flex-row ptb30 mt30">
				<!-- <view class="flex-column-center wper25" @click="gotoFun('/pagesMy/views/operateList')">
					<view class="wh30">
						<image src="/static/images/index/my-1.png" style="width: 30px;height:30px"></image>
					</view>
					<text>操作历史</text>
				</view>
				<view class="flex-column-center wper25" @click="gotoFun('/pagesMy/views/detectList')">
					<view class="wh30">
						<image src="/static/images/index/my-2.png" style="width: 30px;height:30px"></image>
					</view>
					<text>诊断历史</text>
				</view> -->
				<view class="flex-column-center wper25"
					@click="gotoFun('/pagesMy/views/instruction?title=用户手册')">
					<view class="wh30">
						<image src="/static/images/index/my-6.png" style="width: 30px;height:30px"></image>
					</view>
					<text>用户手册</text>
				</view>
				<!-- <view class="flex-column-center wper25"
					@click="gotoFun('/pagesMy/views/instruction?title=保养手册')">
					<view class="wh30">
						<image src="/static/images/index/my-7.png" style="width: 30px;height:30px"></image>
					</view>
					<text>保养手册</text>
				</view> -->
				<view class="flex-column-center wper25" @click="gotoFun('/pagesMy/views/maintainList')">
					<view class="wh30">
						<image src="/static/images/index/my-3.png" style="width: 30px;height:30px"></image>
					</view>
					<text>保养记录</text>
				</view>
				<view class="wper25 " @click="gotoFun('/pagesMy/views/messageList')">
					<view class="flex-column-center">
						<view class="wh30 p-relative">
							<image src="/static/images/index/my-4.png" style="width: 30px;height:30px"></image>
							<view class="p-absolute badge_address">
								<u-badge :value="unReadNum" bgColor="#EC1010"></u-badge>
							</view>
						</view>
						<text>我的消息</text>
					</view>
				</view>
			</view>
			<view class="card-shadow-box mt30">
				<view class="flex-align-center pt20">
					<u-icon name="a-gerenzhongxin-changyonggongneng" color="#0C1124" size="12" :isShowIcon="false"
						customPrefix="iconfontbike iconbike"></u-icon>
					<text class="ml4 bold">常用功能</text>
				</view>
				<view class="ptb30 flex-row">
					<view class="flex-column-center wper25" @click="gotoFun('/pagesMy/views/myMotorbike')">
						<view class="wh30">
							<image src="/static/images/index/my-5.png" style="width: 30px;height:30px"></image>
						</view>
						<text>我的车辆</text>
					</view>
					
					<view class="flex-column-center wper25" @click="gotoFun('/pagesMy/views/feedbackList')">
						<view class="wh30">
							<image src="/static/images/index/my-8.png" style="width: 30px;height:30px"></image>
						</view>
						<text>反馈建议</text>
					</view>
					<view class="flex-column-center wper25" @click="gotoFun('/pagesMy/views/shop')">
						<view class="wh30">
							<image src="/static/images/index/shop.png" style="width: 30px;height:30px"></image>
						</view>
						<text>附近门店</text>
					</view>
				</view>
			</view>
			<!-- <view class="card-shadow-box mt30">
				<view class="flex-align-center pt20">
					<u-icon name="a-gerenzhongxin-zengzhifuwu" color="#0C1124" size="12" :isShowIcon="false"
						customPrefix="iconfontbike iconbike"></u-icon>
					<text class="ml4 bold">增值服务</text>
				</view>
				<view class="ptb30 flex-row">
					<view class="flex-column-center wper25" @click="gotoFun('/pagesMy/views/subscribeService')">
						<image src="/static/images/index/my-9.png" style="width: 30px;height:30px"></image>
						<text>服务订阅</text>
					</view>
				</view>
			</view> -->
			<view class="card-shadow-box mt30">
				<view class="flex-align-center pt20">
					<u-icon name="a-gerenzhongxin-qita" color="#0C1124" size="12" :isShowIcon="false"
						customPrefix="iconfontbike iconbike"></u-icon>
					<text class="ml4 bold">其他</text>
				</view>
				<view class="ptb30 flex-row">
					<view class="flex-column-center wper25" @click="gotoFun('/pagesMy/views/subscribeService')">
						<image src="/static/images/index/my-9.png" style="width: 30px;height:30px"></image>
						<text>服务订阅</text>
					</view>
					<view class="flex-column-center wper25" @click="gotoFun('/pagesMy/views/agreement?title=用户协议')">
						<image src="/static/images/index/my-10.png" style="width: 30px;height:30px"></image>
						<text>用户协议</text>
					</view>
					<view class="flex-column-center wper25"
						@click="gotoFun('/pagesMy/views/agreement?title=隐私保护协议')">
						<image src="/static/images/index/my-11.png" style="width: 30px;height:30px"></image>
						<text>隐私保护协议</text>
					</view>
				</view>
			</view>
		</view>
		<u-modal :show="show" title="编辑用户名称" :showCancelButton="true" @cancel="cancel" @confirm="confirm">
			<u--input placeholder="请输入用户名称" v-model="name">

			</u--input>
		</u-modal>
	</view>

</template>


<script>
	import {
		getBannerAPI
	} from "@/api/api/my"
	import {
		editUserAPI
	} from "@/api/api/user.js"
	import {
		getStoreSyncUtil
	} from "@/utils/store.js"

	import {
		mapState
	} from 'vuex';
	import {
		throttle
	} from '@/utils/utils.js'
	
	export default {
		data() {
			return {
				bannerList: [
					'https://iot-device-saas.oss-cn-shenzhen.aliyuncs.com/public/5.png',
					'https://iot-device-saas.oss-cn-shenzhen.aliyuncs.com/public/4.png',
					'https://iot-device-saas.oss-cn-shenzhen.aliyuncs.com/public/6.png',
				],
				name: "",
				show: false,
				showName:'',
				phone:''
			}
		},

		computed: {
			...mapState(["unReadNum","loginUser"])
		},
		onLoad() {
			getBannerAPI().then(([err, data]) => {
				if (err) return;
				let list = data.records;
				if (list.length) {
					let bannerList = [];
					list.forEach((item) => {
						bannerList.push(item.link);
					})
					this.bannerList = bannerList;
				}
			});
			//#ifdef H5
			let loginUser = getStoreSyncUtil("loginUser");
			this.$store.commit("setLoginUser",loginUser);
			//#endif
		},
		onShow() {
			if (this.unReadNum == 0) {
				uni.removeTabBarBadge({
					index: 3,
				})
			} else {
				uni.setTabBarBadge({
					index: 3,
					text: this.unReadNum + ''
				})
			}
			this.showName = this.loginUser.nick_name;
			this.phone = this.loginUser.phone;
		},
		methods: {
			gotoFun:throttle(function(url){
			   let that =this;
				if(url == "/pagesMy/views/shop"){
					uni.getLocation({
						type: 'wgs84',
						success: function(res1) {
							that.$navigateTo(url);
						},
						fail: function(res) {
							that.$showToast("请开启手机定位!");
						}
					});
				}else{
					this.$navigateTo(url);
				}
			}),
			editName:throttle(function(){
				this.show = true;
				this.name = this.showName;
			}),
			cancel() {
				this.show = false;
			},
			blurStr(str, start, end, num = 3, order = false) {
				if (this.$validatenull(str)) return "";
				let isBlurKeyWord = 1;
				if (isBlurKeyWord == 1) {
					let count = "";
					for (let i = 0; i < num; i++) {
						count += "*"
					}
					return str.substring(0, start) + count + (order ? str.substring(end) : str.substring(str
						.length - end));
				} else {
					return str;
				}
			},
			confirm() {
				this.show = false;
				editUserAPI({
					id: this.loginUser.user_id,
					name: this.name
				}).then(([err, data]) => {
					if (err) return;
					this.showName = this.name;
					this.loginUser.nick_name = this.showName;
					this.$store.commit("setLoginUser",this.loginUser); 
					this.$showToast('修改用户昵称成功');
				})

			}
		}
	}
</script>

<style scoped>


</style>
